<template>
  <div>
    <!-- 图片 -->
    <div class="content">
      <ul>
        <li>
          <h3>{{ details.title }}</h3>
          <div class="message">
            <span>{{ details.createTime }}</span>|
            <span>来源：{{ details.articleOrigin }}</span>
          </div>
          <div class="detail">
            <Editor :value="details.content"></Editor>
          </div>

        </li>
      </ul>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { newsById } from '../api/api'
export default {
  data() {
    return {
      details: {}
    }
  },

  mounted() {
    let id = this.$route.query.id
    newsById(id).then(res => {
      this.details = res.data.data
    })
  },
  methods: {}
}
</script>

<style scoped lang="less">
.content {
  display: flex;
  width: 1296px;
  margin: auto;
  min-height: 800px;
}
ul {
  width: 1296px;
}

h3 {
  margin-top: 50px;
  align-content: center;
  text-align: center;
}

.message {
  color: rgb(148, 149, 150);
  text-align: center;
}

span {
  margin-right: 5px;
}

.detail {
  // font-size:30px;
  margin-top: 50px;
  text-indent: 2em;
}
::v-deep .detail .ql-snow .ql-editor img {
  display: flex;
  text-align: center;
  margin: auto;
  display: block;
}
</style>